<template>
    <div>
      <div @click="tan" style="display:flex;">
               <div style="display:flex;align-items: center;">
                 <van-icon name="cart-o" color="#1989fa" :badge="car.length" size="2rem" />
                 <div style="margin-left:2vw">
                    <p>￥<span style="font-size:18px">{{zong?zong:0}}</span></p>
                    <i style="font-size:12px;color:gray;font-style:normal;">另需配送费￥3</i>
                 </div>
               </div>
               <button v-show="car.length==0" >15元起送</button>
                <button v-show="car.length">去结算</button>
               <transition name="fei">
                    <ul v-show="tanBool">
                            <li v-for="item,i in car" :key="i">
                                <img :src="$image+item.food_img" alt="">
                                <div class="qian">
                                    <p>{{item.name}}</p>
                                    <i style="color:red;font-size:10px;font-style:normal;">￥<span style="font-size:15px">{{item.price}}</span></i>
                                </div>
                                <div class="suan" @click="deletes($event,i)">
                                    <van-icon name="minus" size="20px" color="#0000f8" />
                                    <p>{{1}}</p>
                                    <van-icon name="add" size="20px" color="#0000f8" />
                                </div>
                            </li>
                    </ul>
               </transition>
              
           </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name: '',
    props:{
        Msg:Array,
        
    },
    data(){
        return{
           bool:false,
        //    page:0,
           tanBool:false,
        }
    },
    methods:{
       tan(e){
        //    console.log(e.target.tagName)
            if(e.target.tagName!=="BUTTON"&&e.target.tagName!=='I'){
                this.tanBool=!this.tanBool;
            }else if(e.target.tagName=='BUTTON'){
                if(this.login1==1){
                  console.log("fei")
                  this.$router.push('/trueDing')
                }else if(this.login1==0){
                    alert('还没登录，去登录页')
                    this.$router.push('/login');
                }
            }
            // console.log(e.target)
       },
        deletes(e,i){
            console.log(this.Msg)
            this.Msg.splice(i,1)
            console.log(this.Msg)
        }
    },
    watch:{
       Msg(m){
           if(m.length>0){
               this.bool=true;
            //    console.log("fei")
            //    this.page=m.length;
           }
       }
    },
    computed:{
        zong(){
            if(this.car.length>0){
                var money=0;
                this.car.forEach(item => {
                    money+=Math.floor(item.price);
                });
                // console.log(money);
                return money;
            }
           
        },
        ...mapState(['car','login1']),
       
    
    },
    created(){
    //    console.log(this.value)
        // console.log(this.Msg)
    },
    mounted(){
    //  console.log(this.value)
      
    },
    updated(){
    //    console.log(this.value)
    //  console.log(this.Msg)
     this.$store.commit('setCar',this.Msg)
    //  console.log(this.car)

    },
    destroyed(){
        // console.log(this.Msg)
        this.$store.commit('setCar',this.Msg)
    }
}
</script>

<style scoped>
.fei-enter{
  bottom: -50vw;
  /* transform:translateX(-100vw) scale(0.2,0.2) rotate(0deg); */
  opacity: 0;
  
}
.fei-enter-active{
  transition: all 1.5s;
  position: absolute;
}
.fei-enter-to{
    bottom: 100%;
  /* transform:translateX(0) scale(1,1) rotate(360deg); */
  opacity: 1;
  
}
.fei-leave{
    /* opacity: 1; */
    bottom: 100%;
}
.fei-leave-active{
    transition:all 1.5s;
    position: absolute;
}
.fei-leave-to{
    bottom:-50vw;
    opacity: 0;
}
button{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 24vw;
    height: 100%;
    outline: none;
    border: none;
    background-color: chartreuse;

}
ul{
    position:fixed;
    left: 0;
    bottom: 7.3vh;
    background-color: white;
    padding: 2vw;
    width: 96vw;
    border-radius: 3px;
}
ul li{
    display: flex;
    margin: 2vw 0;
    /* justify-content: space-between; */
}
img{
    width: 14vw;
    height: 14vw;
    border-radius: 5px;
}
li>.qian{
    margin-left: 2vw;
    display: flex;
    flex-direction: column;
    align-content: space-between;
}
.qian>p{
    font-size: 14px;
    width: 60vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 3vw;
}
.suan{
    display: flex;
    width: 23vw;
    margin-top: 4vw;
    justify-content: space-between;
    align-items: center;
    /* padding: 0 2vw; */
}
</style>